<template lang="html">
  <div class="box flex-main">
    <div class="flex-body">
      <!-- banner广告轮播组件 -->
      <bannerSlider :swiperSlides="swiperSlides"></bannerSlider>
      <!-- 分类 -->
      <menu-list :navMenu="navMenu" class="mb"></menu-list>
      <!-- 拼团 -->
      <div class="m-spelling">
        <div class="over mb">
          <img src="@/assets/images/pin.png">
          <span>限量拼团，每日必逛</span>
          <span class="m-more fr" @click="toSpelling">更多</span>
        </div>
        <swiper :options="swiperOption">
            <swiper-slide v-for="(item,index) in spellingList" :key="index">
                <spelling-item :spelling="item"></spelling-item>
            </swiper-slide>
        </swiper>

      </div>

      <div class="m-doctor mb">
        <div class="m-index-tit over tc" :style="{backgroundImage:'url('+require('@/assets/images/cutline@2x.png')+')'}">
          <em>金牌美容师</em>
          <span class="m-more fr" @click="toDoctorlist">更多</span>
        </div>
        <swiper :options="swiperOption_doctor">
            <swiper-slide v-for="(slide,index) in doctorList" :key="index">
                <doctor-item :doctor="slide"></doctor-item>
            </swiper-slide>
        </swiper>
        
      </div>

      <div class="m-doctor bg-none">
        <div class="m-index-tit over tc" :style="{backgroundImage:'url('+require('@/assets/images/cutline@2x.png')+')'}">
          <em>热销项目</em>
        </div>
        <div class="m-items">
          <project-item class="m-item" 
          v-for="(item,index) in indexprojectList" :key="index"
          :project="item" :type="'1'"></project-item>
        </div>
      </div>

      <div class="m-doctor bg-none">
        <div class="m-index-tit over tc" :style="{backgroundImage:'url('+require('@/assets/images/cutline@2x.png')+')'}">
          <em>热销产品</em>
        </div>
        <div class="m-items">
          <project-item class="m-item" 
          v-for="(item,index) in indexgoodList" :key="index"
          :project="item" :type="'2'"></project-item>
        </div>
      </div>

    </div>

    <footer-nav class="flex-bottom"></footer-nav>

  </div>
</template>

<script>
import {
  indexBanner,
  navigation,
  indexSpelling,
  doctorlist,
  indexproject,
  getGoodslist
} from "@/api/views";
import bannerSlider from "@/model/index/bannerSlider";
import {mapState,mapMutations,mapActions} from 'vuex';
/**产品2、项目1、卡项3 */
export default {
  name: "",
  data() {
    return {
      navMenu: [],
      swiperOption: {
        pagination: {
          // el: '.swiper-pagination'
        },
        slidesPerView: 2.5,
        spaceBetween: 10,
        freeMode: true
      },
      swiperSlides: [],
      spellingList: [], //拼团列表
      swiperOption_doctor: {
        //拼团slide
        pagination: {
          // el: '.swiper-pagination'
        },
        slidesPerView: 4,
        spaceBetween: 10,
        freeMode: true
      },
      doctorList: [], //美容师列表
      indexprojectList: [], //项目列表
      indexgoodList:[],     //产品列表
      banner_url: process.env.API_HOST,
    };
  },
  components: {
    bannerSlider,
    menuList: () => import("@/model/index/menu"),
    spellingItem: () => import("@/model/spelling/spellingItem"),
    projectItem: () => import("@/model/projectList/projectItem"),
    doctorItem: () => import("@/model/doctor/doctorItem")
  },
  methods: {
    // 跳转到拼团首页
    toSpelling() {
      this.$router.push({ name: "spelling" });
    },
    // 跳转到美容师列表
    toDoctorlist() {
      this.$router.push({name:'doctorsList'});
    },
    // 获取轮播图
    getIndex_ad() {
      let that = this;
      let param = {
        flag: "index"
      };
      indexBanner(param)
        .then(result => {
          that.swiperSlides = result.list;
        })
        .catch(err => {});
    },
    // nav菜单栏
    getNavigation() {
      let that = this;
      navigation({IsMinProgram:1})
        .then(response => {
          that.navMenu = response.list;
        })
        .catch(error => {});
    },
    // 拼团列表
    getSpelling() {
      let that = this;
      indexSpelling({ IsHot: 0 })
        .then(res => {
          that.spellingList = res.list.data;
        })
        .catch(error => {});
    },
    // 美容师列表
    getDoctor() {
      let that = this;
      doctorlist({ page: 1, list_rows: 10 })
        .then(res => {
          that.doctorList = res.list.data;
        })
        .catch(error => {});
    },
    // 项目列表
    getIndexproject() {
      let that = this;
      this.$indicator.open('加载中...');
      indexproject({ page: 1, list_rows: 10 }).then(res => {
          that.indexprojectList = res.list.data;
          this.$indicator.close();
        }).catch(error => {this.$indicator.close();});
    },
    // 产品列表
    getIndexgoods() {
      let that = this;
      getGoodslist({ page: 1, list_rows: 10 })
        .then(res => {
          that.indexgoodList = res.list.data;
        })
        .catch(error => {});
    },
  },
  mounted() {
    this.getIndex_ad();
    this.getNavigation();
    this.getSpelling();
    this.getDoctor();
    this.getIndexproject();
    this.getIndexgoods();
  }
};
</script>

<style scoped lang="less" src="@/less/index/index.less"></style>
